<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>系统登录</title>

    <link rel="stylesheet" type="text/css" href='{{ assets("css/bootstrap.min.css") }}'>

    <script src='{{ assets("js/admin-rtl.js") }}'></script>

    <link rel="stylesheet" type="text/css" href='{{ assets("css/font-awesome.css") }}'>
    <link rel="stylesheet" type="text/css" href='{{ assets("css/nanoscroller.css") }}'>

    <link rel="stylesheet" type="text/css" href='{{ assets("css/theme_styles.css") }}'>

    <link href='{{ assets("css/css.css") }}' rel='stylesheet' type='text/css'>

    <style>
    .login-captcha {
        position: relative;
    }
    .login-captcha .captcha-img {
        position: absolute;
        right: 0;
        z-index: 99;
        cursor: pointer;
    }
    </style>
</head>

<body id="login-page">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div id="login-box">
                    <div id="login-box-holder">
                        <div class="row">
                            <div class="col-xs-12">
                                <header id="login-header">
                                    <div id="login-logo">
                                        <img src='{{ assets("picture/logo.png") }}' alt="">
                                    </div>
                                </header>
                                
                                <div id="login-box-inner">
                                    <form role="form" action="index.html">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-user"></i>
                                            </span>
                                            <input class="form-control" id="username" type="text" placeholder="登录账号">
                                        </div>
                                        
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-key"></i>
                                            </span>
                                            <input type="password" id="password" class="form-control" placeholder="登录密码">
                                        </div>
                                        
                                        <div class="input-group login-captcha">
                                            <span class="input-group-addon">
                                                <i class="fa fa-key"></i>
                                            </span>
                                            <input type="text" id="captcha" class="form-control" placeholder="验证码">
                                            <img src='/auth/captcha'
                                                class="captcha-img js-captcha-refresh"
                                                data-src='/auth/captcha'
                                                alt="验证码" 
                                                title="刷新验证码">
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <button type="button" class="btn btn-success col-xs-12 js-login-btn">登录</button>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="login-box-footer">
                        <div class="row">
                            <div class="col-xs-12">
                                Copyright © {{ nowTime().ToFormatString("2006") }}.<a href="https://github.com/deatil" target="_blank">Deatil</a> All rights reserved
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include "common/tool_options.html" %}
    
    <script src='{{ assets("js/admin-skin-changer.js") }}'></script>
    <script src='{{ assets("js/jquery.js") }}'></script>
    <script src='{{ assets("js/bootstrap.js") }}'></script>
    <script src='{{ assets("js/jquery.nanoscroller.min.js") }}'></script>
    <script src='{{ assets("js/admin.js") }}'></script>
    <script src='{{ assets("js/layer/layer.js") }}' type="text/javascript"></script>

    <script src='{{ assets("js/scripts.js") }}'></script>

    <script type="text/javascript">
    ;(function($) {
        "use strict";
        
        // 刷新验证码
        $(".js-captcha-refresh").click(function(e) {
            e.stopPropagation;
            e.preventDefault;
            
            var url = $(this).data("src") + "?t=" + Math.random();
            $(this).attr("src", url);
        });
        
        // 登录
        $(".js-login-btn").click(function(e) {
            e.stopPropagation;
            e.preventDefault;

            var username = $("#username").val();
            var password = $("#password").val();
            var captcha = $("#captcha").val();

            var url = '/auth/login';
            $.post(url, {
                username: username,
                password: password,
                captcha: captcha,
            }, function(data) {
                if (data.code == 0) {
                    layer.msg("登录成功");
                    
                    setTimeout(function() {
                        window.location.href = '/';
                    }, 1500);
                } else {
                    layer.msg(data.message);
                }
            }).fail(function (xhr, status, info) {
                layer.msg("请求失败");
            });
        });
    })(jQuery);
    </script>

</body>
</html>
